<template>
	<div class="content">
		<!-- 左侧表格 -->
		<div class="left-list">
			<div class="list-title">
				<div class="num-left">No.</div>
				<div class="name">
					{{ $t("message.environmentSetting.term.title") }}
				</div>
			</div>
			<div class="list-content">
				<div v-for="(i, index) in classify_arr" :key="index" @click="(acitveItem = index), onLeftTableClick(i)"
					:class="acitveItem == index ? 'active-item item' : 'item'">
					<div class="num-left">{{ i.codOrdr }}</div>
					<div class="name">{{ i.clsName }}</div>
				</div>
			</div>
		</div>

		<!-- 右侧表格 -->
		<div class="right-table">
			<div class="right-table-title">
				<div class="input-wrapper">
					<el-input v-model="readonlyLabel" readonly></el-input>


					<el-select class="bgFFF" v-model="List1Value" placeholder=" " style="margin: 0 20px;"
						@change="getList2Fn(), getDataFn()">
						<el-option v-for="(item, index) in List1" :key="item.key" :label="item.label" :value="item.key">
						</el-option>
					</el-select>
					<el-select class="bgFFF" v-model="List2Value" placeholder=" " @change="getDataFn">
						<el-option v-for="(item, index) in List2" :key="item.key" :label="item.label" :value="item.key">
						</el-option>
					</el-select>
				</div>
				<div class="btn-wrapper">
					<el-button size="mini" style="width: 32px;max-width: 32px;" @click="sort('top')"
						:disabled="List2.length == 0">
						<i class="el-icon-caret-top"></i>
					</el-button>
					<el-button size="mini" style="width: 32px;max-width: 32px;" @click="sort('bottom')"
						:disabled="List2.length == 0">
						<i class="el-icon-caret-bottom"></i>
					</el-button>
					<el-button @click="addEdit" :disabled="List2.length == 0">
						{{ $t("message.environmentSetting.btns.topBtn.save") }}
					</el-button>
					<el-button @click="deltDataFn" :disabled="List2.length == 0 || tableData.length == 0">
						{{ $t("message.environmentSetting.btns.topBtn.del") }}
					</el-button>
				</div>
			</div>
			<ux-grid :data="tableData" :border="true" :header-cell-style="{
				color: 'rgba(0, 0, 0, 0.85)',
				fontSize: '14px',
				textAlign: 'left',
				fontWeight: 'bold',
				padding: 0,
				height: '32px',
				background: '#F5F5F5',
			}" :cell-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '14px',
				textAlign: 'left',
				padding: 0,
				height: '32px',
			}" :row-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '13px',
				textAlign: 'left',
				padding: 0,
				height: '32px',
			}" max-height="758" ref="uxGrid" :height="tableHeight" v-loading="loading" element-loading-spinner="el-icon-loading"
				@cell-click="handClick" element-loading-background="#f8f8f8"
				:element-loading-text="$t('message.bhView.loading')">
				<template slot="empty"> No data </template>
				<!-- <ux-table-column style="pointer-events:none;" type="checkbox" width="55"> </ux-table-column> -->
				<ux-table-column property="codName" :title="$t('message.environmentSetting.term.table.column_1')"
					width="255">
					<template slot-scope="scope">
						<el-input v-model="scope.row.name" class="table-input"
							@input="scope.row.name = $setMaxLength(scope.row.name, 50)">
						</el-input>
					</template>
				</ux-table-column>
				<ux-table-column property="codSymb" :title="$t('message.environmentSetting.term.table.column_4')">
					<template slot-scope="scope">
						<el-input class="table-input" v-model="scope.row.ordr"
							@input="scope.row.ordr = Number($setMyNum(scope.row.ordr, '3 - 0')) == 0 ? null : Number($setMyNum(scope.row.ordr, '3 - 0'))">
						</el-input>
					</template>
				</ux-table-column>
			</ux-grid>
			<div class="footer-wrapper">
				<el-button @click="getDataFn">
					{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
				</el-button>
				<el-button type="primary" class="okBTn" @click="saveFn">
					{{ $t("message.environmentSetting.btns.bottomBtn.save") }}
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getDetialsStyleGroup, getDetialsStyleGlossary, getDetialsStyleGlossaryDataList, getDelDetialsStyleGlossaryDataTipsMsg,
	delDetialsStyleGlossaryData, addDetialsStyleGlossaryData
} from "@/api/api";
export default {
	name: "Tab4",
	data() {
		return {
			acitveItem: 0,
			loading: false,
			tableHeight: 350,

			clsName: "",

			classify_arr: [
				{ codOrdr: 1, clsName: '詳細仕様用語集' },
			],

			tableData: [],
			handRow: {},
			readonlyLabel: '詳細仕様用語集',
			List1: [],
			List2: [],
			List1Value: 0,
			List2Value: 0,
		};
	},
	components: {},
	watch: {},
	methods: {
		swapArrayElements(array, index1, index2, preservedKey) {
			[array[index1], array[index2]] = [array[index2], array[index1]];
			if (preservedKey !== undefined && preservedKey in array[index1] && preservedKey in array[index2]) {
				[array[index1][preservedKey], array[index2][preservedKey]] = [array[index2][preservedKey], array[index1][preservedKey]];
			}
			return array;
		},

		sort(sor) {
			const index = this.tableData.findIndex(item => item == this.handRow); // 获取到当前下表

			if (index == 0 && sor == 'top') {
				console.log('最上 return');
				return
			}
			if (index == this.tableData.length - 1 && sor == 'bottom') {
				console.log('最下 return');
				return
			}
			if (sor == 'top') {
				this.swapArrayElements(this.tableData, index, index - 1, 'ordr');
			}
			if (sor == 'bottom') {
				this.swapArrayElements(this.tableData, index, index + 1, 'ordr');
			}
			console.log(sor, index);
			this.$set(this.tableData, index, this.tableData[index]);
		},
		handClick(e) {
			console.log(e);
			this.handRow = e;
		},
		addEdit() {
			this.tableData.push({
				name: '',
				ctgCode: this.List1Value,
				ordr: this.tableData.length == 0 ? 1 : this.tableData[this.tableData.length - 1].ordr + 1,
				dtlNo: this.tableData.length == 0 ? 0 : this.handRow.dtlNo,
				idxNo: 0,
				oldName: this.tableData.length == 0 ? '' : this.handRow.oldName,
			})
		},
		// 获取大组下拉框
		async getList1Fn() {
			this.List1.length = 0;
			let D = {};
			let R = await getDetialsStyleGroup(D);
			this.List1 = R.data.data;
			try {
				this.List1Value = this.List1[0].key;
			} catch (error) {
			}
		},
		// 获取小组下拉框
		async getList2Fn() {
			this.List2Value = '';
			this.List2.length = 0;
			let D = { CtgCode: this.List1Value };
			let R = await getDetialsStyleGlossary(D);
			this.List2 = R.data.data;
			try {
				this.List2Value = this.List2[0].key;
			} catch (error) {
			}

			this.getDataFn();
		},


		async getDataFn() {
			this.tableData.splice(0, this.tableData.length);
			if (this.List2Value == '') {
				return
			}
			this.loading = true;
			let D = { CtgCode: this.List1Value, Code: this.List2Value };
			let R = await getDetialsStyleGlossaryDataList(D);
			this.loading = false;
			this.tableData = R.data.data;
			this.handRow = this.tableData[0];
			this.$refs.uxGrid.setCurrentRow(this.tableData[0]);
		},

		async saveFn() {
			let D = { CtgCode: this.List1Value, Code: this.List2Value || 0, DataList: this.tableData };
			let R = await addDetialsStyleGlossaryData(D);
			if (!R) {
				return
			}
			this.$message.success(R.data.msg);
			await this.getDataFn();
		},

		async getDeltMsgFn() {
			const response = await getDelDetialsStyleGlossaryDataTipsMsg({});
			return response.data.msg;
		},

		async deltDataFn() {
			const message = await this.getDeltMsgFn();
			try {
				await this.$confirm(message, '', {
					confirmButtonText: 'OK',
					cancelButtonText: 'Cancel',
					type: 'warning'
				});
				await delDetialsStyleGlossaryData({ CtgCode: this.List1Value, DtlNo: this.handRow.dtlNo, IdxNo: this.handRow.idxNo });
				this.getDataFn();
			} catch (error) {
			}
		},

		async initFn() {
			await this.getList1Fn();
			await this.getList2Fn();
			await this.getDataFn();
		}
	},
	created() { },
	mounted() {

		this.initFn();

		let _this = this;
		this.tableHeight = $(".right-table").height() - 90;
		this.$nextTick(function () {
			window.addEventListener(
				"resize",
				() => {
					return (() => {
						_this.tableHeight = $(".right-table").height() - 90;
					})();
				},
				false
			);
		});
	},
	beforeDestroy() { },
	destroyed() { }
};
</script>
<style lang="scss" scoped>
.content {
	width: 100%;
	min-height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left-list {
		width: 240px;
		height: 100%;
		border: 1px solid #c3c3c3;

		.list-title {
			width: 100%;
			height: 30px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1px solid #dddddd;
			background: rgba(33, 61, 73, 0.05);

			.num-left {
				border-right: 1px solid #dddddd;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}

			.name {
				width: calc(100% - 30px);
				line-height: 30px;
				text-align: center;
			}
		}

		.list-content {
			width: 100%;
			height: calc(100% - 30px);
			overflow: hidden;
			overflow-y: auto;

			.item {
				width: 100%;
				height: 24px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid #dddddd;
				background: #fff;
				transition: 0.5s;
				cursor: pointer;

				.num-left {
					border-right: 1px solid #dddddd;
					width: 30px;
					height: 24px;
					text-align: center;
					line-height: 24px;
				}

				.name {
					width: calc(100% - 30px);
					line-height: 24px;
					padding-left: 16px;
				}
			}

			.item:hover {
				background: #ffffe1;
			}

			.active-item {
				background: #ffffe1;
			}
		}
	}

	.right-table {
		position: relative;
		background: #fff;
		position: relative;
		width: calc(100% - 264px);
		height: 100%;

		.right-table-title {
			position: relative;
			width: 100%;
			height: 44px;
			padding-bottom: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: rgb(248, 248, 248);

			.input-wrapper {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			::v-deep .el-input {
				width: 240px;
				// height: 32px;
				// background: #ffffe1;
			}

			::v-deep .el-input__inner {
				width: 240px;
				height: 32px;
				background: #ffffe1;
			}

			.bgFFF {
				::v-deep .el-input__inner {
					width: 240px;
					height: 32px;
					background: #FFF;
				}
			}

			::v-deep .el-select__caret {
				line-height: 32px;
			}

			::v-deep .el-cascader .el-input__inner {
				width: 240px;
				height: 32px;
				background: #fff;
				margin-left: 16px;
			}

			.ipt {
				margin-left: 24px;

				::v-deep .el-input__inner {
					background: #fff;
				}

				::v-deep .el-input__icon {
					line-height: 32px;
				}
			}

			.btn-wrapper {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 68px;
					height: 32px;
					// border: 1px solid #d9d9d9;
					margin-left: 16px;
				}

				button:nth-child(1) {
					width: 32px;
					font-size: 18px;
				}

				button:nth-child(2) {
					width: 32px;
					font-size: 18px;
				}

				.active-button {
					background: #106ebe;
					color: #ffffff;
				}
			}
		}

		.footer {
			padding: 0 12px;
			// position: absolute;
			// left: 0;
			// bottom: 45px;
			width: 100%;
			height: 32px;
			background: #edeeef;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.message-wrapper {
			display: flex;
			align-items: center;

			p {
				min-width: 60px;
				margin-right: 12px;
			}
		}

		.table-input {
			::v-deep .el-input__inner {
				background: none;
				border: 0 none;
				padding: 0;
			}
		}
	}
}

.footer-wrapper {
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 47px;
	display: flex;
	align-items: center;
	background: rgb(248, 248, 248);

	button {
		padding: 0 12px;
		min-width: 123px;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		text-align: center;
		line-height: 32px;
		margin-right: 16px;
	}

	.okBTn {
		// background: #106ebe;
		// color: #fff;
	}
}



::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
	border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
	box-shadow: none;
}

::v-deep .elx-table .is--checked.elx-cell--checkbox .elx-checkbox--icon:before,
::v-deep .elx-table .is--indeterminate.elx-cell--checkbox .elx-checkbox--icon:before,
::v-deep .is--checked.elx-table--filter-option .elx-checkbox--icon:before,
::v-deep .is--indeterminate.elx-table--filter-option .elx-checkbox--icon:before {
	background: #106ebe;
	border-color: #106ebe;
}

::v-deep .el-color-picker__icon {
	display: none;
}

::v-deep .el-color-picker--mini .el-color-picker__trigger {
	padding: 0;
}

::v-deep .el-radio-button {
	height: 36px;
	width: 238px;
}

::v-deep .el-radio-button__inner {
	width: 100%;
	height: 100%;
}
</style>
